<template>
	<view class="pT15">
		<view class="searchBox mL15 mR15 bgf">
			<u-search placeholder="搜索常用工姓名" v-model="query.usedName" height="80" :show-action="false" bg-color="#fff"
				shape="square" @search='search'>
			</u-search>
		</view>
		<view class="flex flex-wrap  relative mB10  mL15 mR15 pB15">
			<view class="jobTag" :class="item.checked?'checked':''" @click="changeTab(item,i)"
				v-for="(item,i) in tagLis" :key='item.value'>
				{{item.text}}
			</view>
		</view>
		<mescroll-uni class="lisBox tabBarLisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" :bottombar="false" :top="220" :wxSelfTabbar="true">
			<view>
				<workerJob :list="list" :isHome="true" :isDistance="false"></workerJob>
			</view>
		</mescroll-uni>
	</view>

</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import workerJob from "@/components/company/jobCard/index.vue"
	import {
		getLocal
	} from "@/libs/map.js"
	import {
		getOftenJober
	} from '@/api/companyInterface/job.js'
	

	export default {
		mixins: [MescrollMixin],
		components: {
			workerJob
		},
		data() {
			return {
				downOption: {
					use: true,
					auto: false
				},
				query: {
					usedLatitude:null,
					usedLongitude:null,
					usedUserId:"",
					usedName:"",
					pageSize: 10,
					pageNo: 1
				},
				selColor: false,
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
				list: [],




			};
		},
		onShow(e) {

		},
		methods: {
			changeTab(item, i) {
				this.tagLis[i].checked = !this.tagLis[i].checked;
				if (this.tagLis[i].checked) {
					this.query.oftenFilter.push(item.value)
				} else {
					this.query.oftenFilter = this.query.oftenFilter.filter(v => v != item.value)
				}
				this.list = [];
				this.markers = [];
				this.mescroll.resetUpScroll();
			},

			search() {
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			async upCallback(page) {
				// return this.mescroll.endSuccess(1)
				if (page.num == 1) this.list = [];
				this.query.pageNo = page.num;
				const {lat,lon} = await this.xf.getLatOrLon()
				this.query.latitude = lat;
				this.query.longitude =lon;
			
				getOftenJober(this.query).then(res => {
					let list = res.result.records;
					this.list = this.list.concat(list);
					this.mescroll.endSuccess(res.result.records.length);

				}).catch(err => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endErr();
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.bgImg {
		position: absolute;
		height: 400rpx;
		width: 100%;
		z-index: 0;
	}

	.searchBox {
		position: relative;
		z-index: 1;
		border-radius: 10rpx;
	}

	.jobMoney {
		color: #EB392F;
	}

	.jobTag {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #8D8D8D;
		width: 152rpx;
		height: 54rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-right: 27rpx;
		line-height: 54rpx;
		text-align: center;
		border: 2rpx solid #fff;

		&:last-child {
			margin-right: 0;
		}

		&.checked {
			color: #3291F8;
			border: 2rpx solid #3291F8;
		}
	}
</style>